<template>
 <div style="width: 100%;height: 100%;padding: 16px 20px;">
    <div style="width: 400px;height: 100%;float: right;background-color: white;border-radius: 5px;">
        <div v-if="rightPageId==0">
            <div style="padding: 20px 20px;border-bottom: 1px solid var(--color-neutral-4);position: relative;">
                菜单
            </div>
            <div style="padding: 10px 10px;">
          <div class="right-button" @click="rightPageId=1">
              导入
              <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
          </div>
          <div class="right-button" @click="rightPageId=2">
              清空数据库
              <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
          </div>
            </div>
        </div>
        <div v-if="rightPageId==1">
        <div style="padding: 20px 20px;font-size: 14px;border-bottom: 1px solid var(--color-neutral-4);position: relative;padding-left: 55px;">
            <div style="padding: 20px 20px;position: absolute;left: 0;top: 0;cursor: pointer;" @click="()=>{
              if(isRefreshing)return;
              rightPageId=0
              importIsSelectYear=true;
              importYear=undefined;
            }">
              <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.272 24l16.263 16.264a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L11.03 25.414a2 2 0 010-2.828L28.706 4.908a1 1 0 011.414 0l1.415 1.414a1 1 0 010 1.415L15.271 24z" fill="currentColor"/></svg>
            </div>
            导入
        </div>
        <div style="padding: 20px 20px;height: calc(100% - 56.76px);overflow-y: scroll;">
          <div v-if="importIsSelectYear" style="line-height: 25px;">
            请选择要导入的一分一段表的年份
            <a-select v-model="importYear" placeholder="请选择年份" style="width: 80%;height: 35px;margin-top: 10px;margin-bottom: 15px;">
                <a-option :value="subtractYear(1)">{{ subtractYear(1) }}年</a-option>
                <a-option :value="subtractYear(2)">{{ subtractYear(2) }}年</a-option>
                <a-option :value="subtractYear(3)">{{ subtractYear(3) }}年</a-option>
            </a-select>
            <div style="width: 100%;text-align: right;">
              <a-button type="primary" style="padding: 0 30px;" @click="()=>{
                if(importYear==undefined){
                  $message.error({
                    content:'请选择年份'
                  })
                  return;
                }
                importIsSelectYear=false;
              }">下一步</a-button>
            </div>
          </div>
            <div v-if="importIsSelectYear==false" style="line-height: 25px;">
                <p>表格文件要求</p>
                <p>1.专业数据应保存在表格文件的第一个表格中；</p>
                <p>2.表格的第一行应为每一列数据的标题，并且必须包括“分数”和“位次”这几个标题；</p>
                <p>3.如果表格文件符合上面的要求但是不能正常导入，可能是表格内某些单元格的值过长造成的。</p>
            </div>
              <a-steps v-if="importIsSelectYear==false" label-placement="horizontal" direction="vertical" :current="importStep">
                <a-step>选择Excel文件
                  <br>
                  <input style="font-size: 14px;" :disabled="importStep!=1" type="file" ref="upload" accept=".xls,.xlsx" class="outputlist_upload" @change="readExcel">
                  <br>
                  <div v-if="imporWarningText!=''" style="line-height: 30px;color: red;margin-bottom: 15px;">
                    {{ importWarningText }}
                  </div>
                </a-step>
                <a-step>正在导入
                  <br>
                  <a-button v-if="importStep==2" :loading="true" style="background-color: white !important;color: black !important;margin-top: 10px;">正在处理，请耐心等待。
                    <br>请不要关闭浏览器或离开当前页面。
                    <br>已完成{{  parseInt(importedNum/importNum*100) }}%
                  </a-button>
                </a-step>
                <a-step>完成导入
                  <br>
                  <div v-if="importStep==3" style="font-size: 14px;">
                    共导入{{ importNum }}对分数和位次。
                  </div>
                </a-step>
              </a-steps>
        </div>
                

        </div>
        <div v-if="rightPageId==2">

            <div style="padding: 20px 20px;font-size: 14px;border-bottom: 1px solid var(--color-neutral-4);position: relative;padding-left: 55px;">
            <div style="padding: 20px 20px;position: absolute;left: 0;top: 0;cursor: pointer;" @click="()=>{
              if(isRefreshing)return;
              rightPageId=0
            }">
              <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.272 24l16.263 16.264a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L11.03 25.414a2 2 0 010-2.828L28.706 4.908a1 1 0 011.414 0l1.415 1.414a1 1 0 010 1.415L15.271 24z" fill="currentColor"/></svg>
            </div>
            清空数据库
        </div>
        <div style="padding: 20px 20px;">
            <p style="margin-bottom: 10px;">此操作将清空一分一段表的数据库且不可恢复。</p>
            <div style="text-align: right;">
                <a-button style="padding: 0 30px;" type="primary" status="danger" :loading="isDeleting" @click="deleteAll">删除</a-button>
            </div>
        </div>
        </div>
    </div>
    <div style="width: calc(100% - 420px);height: 100%;float: left;background-color: white;border-radius: 5px;">
      <div style="padding: 20px 20px;border-bottom: 1px solid var(--color-neutral-4);position: relative;">
          一分一段表管理
      </div>
      <div style="padding: 20px 20px;height: calc(100% - 56.76px);overflow-y: scroll;">
        <div style="width: 100%;margin-bottom: 20px;">
          年份<br>
          <a-radio-group @change="getScorerankings" v-model="searchYear" style="margin-top: 10px;">
            <a-radio :value="subtractYear(1)">{{ subtractYear(1) }}年</a-radio>
            <a-radio :value="subtractYear(2)">{{subtractYear(2)}}年</a-radio>
            <a-radio :value="subtractYear(3)">{{subtractYear(3)}}年</a-radio>
          </a-radio-group>
        </div>
        <a-table :loading="isSearching" :columns="[
            {
                title:'分数',
                dataIndex:'score',
            },
            {
                title:'位次',
                dataIndex:'ranking',
            },
        ]" :data="scorerankings"></a-table>
      </div>
    </div>
 </div>
</template>

<script>
import { read, utils } from 'xlsx'
// import * as XLSX from 'xlsx'
// const xlsx = XLSX
import axios from 'axios'
// import path from 'path'

export default{
  data(){
    return{
      scorerankings:[],
      rightPageId:0,
      importNum:0,
      importedNum:0,
      isSearching:false,
      importStep:1,
      isDeleting:false,
      importIsSelectYear:true,
      importYear:undefined,
      searchYear:this.subtractYear(1)
    }
  },
  mounted(){
    this.getScorerankings();
  },
  methods:{
    deleteAll(){
        this.isDeleting=true;
        var config = {
   method: 'post',
   url: '/api/v1/scoreranking/deleteAll',
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res) => {
    this.isDeleting=false;
   if(res.data.status==1){
    this.getScorerankings();
   }else{
    this.$message.error({
        content:res.data.content
    })
   }
})
    },
    subtractYear(num) {
  var currentYear = new Date().getFullYear();
  return currentYear - num;
    },
    getScorerankings(){
        this.isSearching=true;
        var config = {
   method: 'get',
   url: '/api/v1/scoreranking/search?data=' + JSON.stringify({
    isAll:true,
    ranking:0,
    year:this.searchYear
   }),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then( (res) => {
    this.isSearching=false;
   this.scorerankings=res.data.results
})
    },
    importToBackground(re,start,resend){
        let pre = [];
      for(let i=start;i<start+10;i++){
        if(re[i]==undefined){
          continue;
        }
        pre.push(re[i]);
      }
      if(resend!=undefined){
        pre=resend;
      }
      var config = {
   method: 'post',
   url: '/api/v1/scoreranking/import',
   headers: { 
      'Accept': '*/*', 
   },
   data : {
    year:this.importYear,
    data:pre
   }
};

axios(config)
.then((res) => {
  if(res.data.status==2){
    this.importToBackground(re,start,pre);
  }else{
    this.importedNum+=pre.length;
   if(start+10<=re.length-1){
    this.importToBackground(re,start+10);
   }else{
    this.importStep=3;
    this.getScorerankings();
   }
  }
    
})
    },
    readExcel(e) {
      this.importMajorWarningText='';
//  var that = this;
const files = e.target.files;
// 如果没有文件名
if(files.length<=0){
return false;
}else if(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){
this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');
return false;
}
this.importUniversityStep=2;
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
// 切换为新的调用方式
const workbook = read(data, {
type: 'binary'
});
// 取第一张表
const wsname = workbook.SheetNames[0];
// 切换为新的调用方式 生成json表格内容
const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
console.log(ws);
// 后续为自己对ws数据的处理
this.importNum=ws.length;
this.importedNum=0;
this.importStep=2;
this.importToBackground(ws,0);

} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files[0]);
    },
  },
  props:{

  },
}
</script>

<style scoped>

.right-button svg{
  position: absolute;
  right: 15px;
  top: 15px;
}

.right-button:hover{
  background-color: rgb(242,242,242);
}

.right-button{
  width: 100%;
  padding: 15px 15px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 15px;
  position: relative;
  margin-bottom: 5px;
}

</style>